﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>员工抽奖-掌柜宝2017年会</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/static/css/semantic.min.css" />
    <link rel="stylesheet" href="/static/css/common.css" />
    <link rel="stylesheet" href="/static/css/animate.css" />
    <script type="text/javascript">
    var a = {{.UserLogo}}
    </script>
    <style type="text/css">
    .item-list {
        transition: .5s transform;
        
    }
    .item-list.active {
        border: 5px solid #f00 !important;
        transform: scale(1.8, 1.8);
    }    
    .nav {
        height: 50px;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 50px;
    }
    .ui.modal2>.content {
        display: block;
        width: 100%;
        font-size: 1em;
        line-height: 1.4;
        padding: 1.5rem;
        background: #FFF;
        overflow-y: hidden;
        overflow-x: auto;
        display: -webkit-box !important;
    }
    </style>
</head>

<body>
    <div class="background">
        <div class="gap">
            <!-- <div class="gap_info">微信互动抽奖</div> -->
            <div class="gap_lun">参与人数{{.Num}}人</div>
        </div>
        {{if .start}}  

        {{else}}
            <div class="front">
                <!-- <div class="first dashboard"></div> -->
                <div class="second dashboard autumn leaf" style="visibility:hidden">
                    {{range .UserLogo}}
                    <div class="item-list item-select" id="omdoyuCBjgjyr9T0hy1TRe4smvpw" style="visibility:hidden; width: 55px; border-radius: 50%; height: 55px; opacity: 1; border: 5px solid #fff" data-id="{{.Id}}" data-src="{{.ImgUrl}}" data-name="{{.Name}}">
                        <div class="img-border " style="overflow: hidden; width:100%; height: 100%; border-radius: 50%;">
                            <img style="width: 100%;margin-top: -10px; " src="{{.ImgUrl}}" alt="{{.Name}}" >
                        </div>
                    </div>
                    {{end}}
                </div>
            </div>
        {{end}}
        <div class="nav">
            <div class="ui selection dropdown" style="margin-right: 20px;">
              <input type="hidden" name="awards" id="awards" value="3">
              <i class="dropdown icon"></i>
              <div class="text">三等奖</div>
              <div class="menu">
                <div class="item" data-value="1">一等奖</div>
                <div class="item" data-value="2">二等奖</div>
                <div class="item default" data-value="3">三等奖</div>
              </div>
            </div>
<!--             <div class="ui form" style="display: inline-block; width: 100px;">
              <div class="inline fields">
                <div class="wide field" style="width: 100%;">
                  <input type="text" id="num-per" placeholder="人数">
                </div>
              </div>
            </div> -->
            <input type="hidden" name="id" id="per-id">
            <button class="positive ui button start">开始</button>
            <button class="ui olive button stop">停</button>
            <button class="ui yellow button info-b">获奖详情</button>
            <button class="ui button init-p" style="margin-left: 40px;">初始化</button>
            <div style="display:inline-block;text-align: right;margin-left: 400px" class="finish-num">三等奖 已抽0人</div>
        </div>
    </div>

    <div class="ui basic modal modal1">
        <i class="close icon"></i>
        <div class="image content" style="text-align: center; font-size: 30px;">
          <img style="display: inline-block; width: 222px; height: 300px; margin: 0 auto" src="" >
        </div>
        <div class="description" style="text-align: center; font-size: 30px;">
          <p>恭喜你，中奖啦</p>
        </div>
      <div class="actions">
        <div class="two fluid ui inverted buttons">
          <div class="ui ok green basic inverted button">
            <i class="checkmark icon"></i>
            继续抽奖
          </div>
        </div>
      </div>
    </div>

    <div class="ui basic modal modal2">

    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/semantic.min.js"></script>
    <script type="text/javascript" src="/static/js/template.js"></script>
    <script type="text/html" id="info-t">
        <i class="close icon"></i>
        <%if first.empty !="0"%>
        <div class="header">
            一等奖
        </div>
        <div class="image content">
            <%each first.list as key val%>
            <div class="image" style="width: 100px; height: 140px;margin-right:10px;">
                <img style="width: 100%; height: 100%" src="<%key.imgUrl%>">
            </div>
            <%/each%>
        </div>
        <%/if%>
        <%if second.empty !="0"%>
        <div class="header">
            二等奖
        </div>
        <div class="image content">
            <%each second.list as key val%>
            <div class="image" style="width: 100px; height: 140px;margin-right:10px;">
                <img style="width: 100%; height: 100%" src="<%key.imgUrl%>">
            </div>
            <%/each%>
        </div>
        <%/if%>
        <%if thirdly.empty !="0"%>
        <div class="header">
            三等奖
        </div>
         <div class="image content">
            <%each thirdly.list as key val%>
            <div class="image" style="width: 100px; height: 140px;margin-right:10px;">
                <img style="width: 100%; height: 100%" src="<%key.imgUrl%>">
            </div>
            <%/each%>
        </div>
        <%/if%>
        <div class="actions">
            <div class="two fluid ui inverted buttons" style="width: 200px">
                <div class="ui ok green basic inverted button">
                    <i class="checkmark icon"></i> Yes
                </div>
            </div>
        </div>
    </script>
    <script type="text/javascript">
    template.config("openTag", "<%");
    template.config("closeTag", "%>")
    $('.dashboard').transition('fade up');
    var i = 0;
    setInterval(function() {
        if (i >= ({{.Num}})) {
            return 0;
        } else {
            $('.item-list').eq(i).css({
                'visibility': 'inherit'
            }).addClass('animated bounceInLeft');
            i++;
        }
    }, 60)
    var a = 0;
    setTimeout(function() {
        // alert();
        setInterval(function() {
            if (a >= ({{.Num}})) {
                return 0;
            }
            
            a++;
        }, 60)
    }, 4000);
    var temp = true;
    var time = 120;
    var rand;
    var ra;
    function randomNum() {
        rand = setInterval(function() {
            if (!temp) {
                time+=220
                clearInterval(rand);
                randomNum();
                    console.log(time)
                if (time > 1500) {
                    // $('.item-select').eq(ra).removeClass('item-select')
                    console.log(check())
                    if (check()) {
                        updataPer(ra);
                        clearInterval(rand);
                        return 0;
                    } else {
                        time-=220;
                    }
                }
            }
            ra = Math.round(Math.random() * {{.Num}})
            $('.item-select').eq(ra).addClass('active').siblings().removeClass('active');
        }, time)
    }

    $('.start').click(function(event) {
        temp = true;
        time = 120;
        $('.item-list').removeClass('animated').removeClass('bounceInLeft')
        clearInterval(rand);
        randomNum();
    });

    function updataPer(index) {
        var $active = $('.item-list.active');
        var perName = $active.attr('data-name');
        var perId = $active.attr('data-id');
        var imgSrc = $active.attr('data-src');

        $.ajax({
            url: '/awards',
            type: 'POST',
            dataType: 'json',
            data: {
                awards: $('#awards').val(),
                name: perName,
                id: perId,
                imgUrl: imgSrc
            },
        })
        .done(function(data) {
            $('.finish-num').text('已抽'+data.finishNum+'人')
            if (data.id == perId) {
                $('.ui.basic.modal1 .image img').attr('src', imgSrc)
                $('.ui.basic.modal1').modal('show');
            }
        })
    }

    function check () {
        var $active = $('.item-list.active');
        var perId = $active.attr('data-id');
        var check;
        $.ajax({
            url: '/check',
            type: 'POST',
            dataType: 'json',
            async: false,
            data: {
                id: perId
            },
        })
        .done(function(data) {
            console.log(data);
            if (!data.check) {
                check = true
            } else {
                check = false
            }
        })
        return check;
    }


    $('.stop').click(function(event) {
        temp = false;
    });

    $('.info-b').click(function() {

        $.ajax({
            url: '/read',
            type: 'POST',
            dataType: 'json'
        })
        .done(function(data) {
            console.log(data)
            var html = template('info-t', data);
            $('.modal2').html(html);


            $('.ui.basic.modal2').modal('show');
        })
    })
    commonSync ('三等奖');
    function commonSync (title) {
        $.ajax({
            url: '/sync',
            type: 'POST',
            dataType: 'json',
            data: {
                awards: $('#awards').val()
            },
        })
        .done(function(data) {
            console.log(data)
            $('.finish-num').text(title + ' 已抽'+data.finishNum+'人')
        })
    }
    $('.ui.dropdown').dropdown({
        // action: 'hide',
        onChange: function(text, text, $selectedItem) {
            commonSync (text)
        }
    })

    $('.init-p').click(function() {
        $.ajax({
            url: '/init',
            type: 'POST',
            dataType: 'json'
        })
        .done(function(data) {
            // console.log(data)
            if (data.success) {
                location.reload()
            }
        })
    }) 

    </script>
</body>

</html>
